import React, { useEffect, useState } from 'react'
import { getInfo } from "../../service/userService"
import { Cell, NavBar, Image, Button } from 'react-vant';
import { APP_API_BASE } from '../../service/api';
import { useNavigate } from 'react-router-dom';
import {
  LocationO,
  BalanceO,
  InfoO,
  Discount,
  Edit,
} from '@react-vant/icons'
import { Avatar } from 'antd-mobile';


function DigitNumber({ num, title }) {
  return (
    <div style={{
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
    }}>
      <div style={{
        fontWeight: "bold",
        fontSize: "18px",
        color: "white",
        marginBottom: "8px"
      }}>{Number(num).toLocaleString()}</div>
      <div
        style={{ color: "blue" }}
      >{title}</div>
    </div>
  )
}


export default function Info() {
  const navigate = useNavigate();
  const [user, setUser] = useState();

  useEffect(() => {
    (async () => {
      let { data } = await getInfo();
      console.log(data.user);
      setUser(data.user);
    })()
  }, [])

  return (
    <div style={{
      backgroundColor: "#eee"
    }}>
      <NavBar
        title="会员"
        leftText="返回"
        onClickLeft={() => navigate(-1)}
      />

      {user && (
        <div>
          <div>
            <div style={{
              display: "flex",
              alignItems: "center",
              padding: "12px"
            }}>
              <Image round width={40} height={40} src={`${APP_API_BASE}/prod-api${user.avatar}`} alt={`${APP_API_BASE}${user.avatar}`} />
              <div style={{ fontSize: "18px", marginLeft: "12px" }}>{user.nickName}</div>
              <div style={{
                fontSize: "18px",
                marginLeft: "auto",
              }}
                onClick={(() => {
                  navigate("/edituser")
                })}
              > <Edit /> 修改信息</div>
            </div>
          </div>

          <div style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-around",
            backgroundColor: '#4158D0',
            backgroundImage: "linear-gradient(180deg, #4158D0 0%, #C850C0 46%, #FFCC70 97%)",
            padding: "32px 12px",
            borderRadius: "8px"
          }}>
            <DigitNumber num={user.score} title="积分" />
            <DigitNumber num={user.balance} title="余额" />
          </div>

          <div style={{
            marginTop: "12px",
            backgroundColor: "#fff",
          }}>
            <Cell icon={<BalanceO />} title='我的钱包' isLink />
            <Cell icon={<LocationO />} title='我的地址' isLink />
            <Cell icon={<InfoO />} title='我的消息' isLink />
            <Cell icon={<Discount />} title='领优惠券' isLink />
          </div>
        </div>)
      }
    </div >
  )
}
